import React from 'react';
import { css } from '@emotion/css';
import { PluginTypeCode } from 'types';

interface PluginTypeIconProps {
  typeCode: PluginTypeCode;
  size: number;
}

export const PluginTypeIcon = ({ typeCode, size }: PluginTypeIconProps) => {
  const imageUrl = ((typeCode: string) => {
    switch (typeCode) {
      case 'panel':
        return '';
      case 'datasource':
        return '';
      case 'app':
        return '';
      default:
        return undefined;
    }
  })(typeCode);

  return imageUrl ? (
    <div
      className={css`
        display: inline-block;
        background-image: url(${imageUrl});
        background-size: ${size}px;
        background-repeat: no-repeat;
        width: ${size}px;
        height: ${size}px;
      `}
    />
  ) : null;
};
